---
title: Alignment
description: Align your content to different positions.
docs:
  - route: /docs/components/align-dropdown-menu
    title: Align Dropdown Menu
---

<ComponentPreview name="playground-demo" id="align" />

<PackageInfo>

## Features

- Provides text alignment options: left, right, center, or justify.

</PackageInfo>

## Installation

```bash
npm install @udecode/plate-alignment
```

## Usage

```tsx
// ...
import { createPlateEditor } from '@udecode/plate-common/react';
import { AlignPlugin } from '@udecode/plate-alignment/react';
import { ParagraphPlugin } from '@udecode/plate-common/react';
import { HeadingPlugin } from '@udecode/plate-heading/react';

const editor = createPlateEditor({
  plugins: [
    HeadingPlugin,
    AlignPlugin.configure({
      inject: {
        targetPlugins: [
          ParagraphPlugin.key,
          HeadingPlugin.key,
        ],
      },
    }),
  ],
});
```

## Plugins

### AlignPlugin

## API

### setAlign

Sets the alignment for the specified block elements in the editor.

<APIParameters>
<APIItem name="editor" type="PlateEditor">
The editor instance.
</APIItem>
<APIItem name="options" type="object" optional>
<APISubList>
<APISubListItem parent="options" name="value" type="Alignment" optional>
The alignment value.
</APISubListItem>
<APISubListItem parent="options" name="setNodesOptions" type="SetNodesOptions" optional>
</APISubListItem>

</APISubList>
</APIItem>
</APIParameters>

## API Components

### useAlignDropdownMenuState

<APIReturns>
  <APIItem name="value" type="'left' | 'center' | 'right' | 'justify'">
    The alignment value.
  </APIItem>
</APIReturns>

### useAlignDropdownMenu

<APIState>
  <APIItem name="value" type="'left' | 'center' | 'right' | 'justify'">
    The alignment value.
  </APIItem>
</APIState>

<APIReturns>
  <APIItem name="radioGroupProps" type="object">
    Props for the radio group.
    <APISubList>
      <APISubListItem
        parent="radioGroupProps"
        name="value"
        type="'left' | 'center' | 'right' | 'justify'"
      >
        The alignment value.
      </APISubListItem>
      <APISubListItem
        parent="radioGroupProps"
        name="onValueChange"
        type="function"
      >
        Callback to set the alignment value.
      </APISubListItem>
    </APISubList>
  </APIItem>
</APIReturns>
